<script setup lang="ts">
import { getMedicalOrderLogistics } from '@/api/medicine'
import type { Express } from '@/types/medicine'
import { ref } from 'vue'
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
import AMapLoader from '@amap/amap-jsapi-loader'
// 导入自定义图标文件
import startImg from '@/assets/start.png'
import endImg from '@/assets/end.png'
import carImg from '@/assets/car.png'

const route = useRoute()
// 1. 获取物流详情数据
const express = ref<Express>()
const getExpress = async () => {
  const res = await getMedicalOrderLogistics(route.params.id as string)
  console.log('物流详情数据：', res)
  express.value = res
}
onMounted(() => {
  getExpress()
})
// 2. 高德地图绘制物流轨迹
// v2.0 需要配置安全密钥jscode
window._AMapSecurityConfig = {
  // == 配置自己的安全密钥 ==
  securityJsCode: '9ad2b31a5625c678a3e315dd51e130f3'
}
// 初始化高德地图
const initMap = async () => {
  // 1. 回调写法
  // AMapLoader.load({
  //   // == 配置自己的key ==
  //   key: 'fe7e550905bb36171ef9c9e86fdfb358',
  //   version: '2.0'
  // }).then((AMap) => {
  //   // 使用 Amap 初始化地图
  //   console.log('地图加载成功：', AMap)
  // })
  // 2. async/await写法（推荐）
  const AMap = await AMapLoader.load({
    // == 配置自己的key ==
    key: 'fe7e550905bb36171ef9c9e86fdfb358',
    version: '2.0'
  })
  // 使用 Amap 初始化地图
  console.log('地图加载成功：', AMap)
  // 创建并绘制地图实例
  const map = new AMap.Map('map', {
    /**
     * zoom是地图的缩放级别
     * 1. 值越小地图显示的范围越大
     * 2. 值越大地图显示的更详细
     */
    zoom: 11, //初始化地图层级
    // 语法：mapStyle: 'amap://styles/皮肤名字'
    mapStyle: 'amap://styles/whitesmoke'
  })
  // 绘制物流轨迹
  // 说明：AMap.plugin('AMap.Driving', callback) 按需加载路线规划类（方法）
  AMap.plugin('AMap.Driving', () => {
    // 1. 创建路线规划实例
    const driving = new AMap.Driving({
      map, // 指定轨迹显示地图实例
      showTraffic: false, // 关闭交通状态
      hideMarkers: true // 关闭默认图片显示
    })
    // 对后台express.value?.logisticsInfo做个=》掐头去尾
    // 开始位置坐标
    // const start = [116.618109, 40.157796]
    const start = express.value?.logisticsInfo.shift()
    // 结束位置坐标
    // const end = [116.629412, 40.162822]
    const end = express.value?.logisticsInfo.pop()

    console.log('途径点坐标：', express.value?.logisticsInfo)
    // 格式化途径点坐标为二维数组
    const waypoints = express.value?.logisticsInfo.map((item) => [item.longitude, item.latitude])
    console.log('途径点坐标二维数组:', waypoints)

    // 2. 通过driving.search(起点坐标:[longitude经度, latitude纬度], 终点坐标:[longitude经度, latitude纬度], callback)方法查询绘制路线到地图
    driving.search(
      [start?.longitude, start?.latitude],
      [end?.longitude, end?.latitude],

      // 设置途径点坐标: [[longitude经度, latitude纬度], [longitude经度, latitude纬度]...] (二维数组)
      {
        waypoints
      },

      function (status: string) {
        if (status === 'complete') {
          console.log('路线绘制成功！')
          // 自定义位置上显示的图标
          // 开始位置图标
          new AMap.Marker({
            icon: startImg, // 自定义图片地址
            position: [start?.longitude, start?.latitude], // 坐标位置
            map // 显示到对应的地图实例上
          })
          // 终点位置图标
          const endMarker = new AMap.Marker({
            icon: endImg,
            position: [end?.longitude, end?.latitude],
            map
          })

          // == 购买药品当前位置 ==
          const currMarker = new AMap.Marker({
            icon: carImg,
            position: [
              express.value?.currentLocationInfo.longitude,
              express.value?.currentLocationInfo.latitude
            ],
            map
          })

          setTimeout(() => {
            /**
             * 语法：map.setFitView([图标实例1, 图标实例2...])
             * 作用：根据传入的图标实例位置，调整地图为最佳视野
             */
            map.setFitView([currMarker, endMarker])
          }, 3000)

          // 添加显示到地图
          // map.add(startMarker)
          // map.add(endMarker)
        } else {
          console.log('路线绘制失败！')
        }
      }
    )
  })
}
onMounted(() => {
  initMap()
})
</script>

<template>
  <div class="order-logistics-page" v-if="express">
    <!-- 
      1. 地图在div#map下绘制显示
      2. 显示物流配送信息
     -->
    <div id="map">
      <div class="title">
        <van-icon name="arrow-left" @click="$router.back()" />
        <span>{{ express.statusValue }}</span>
        <van-icon name="service" />
      </div>
      <div class="current">
        <p class="status">{{ express.statusValue }}-- 预计{{ express.estimatedTime }}</p>
        <p class="predict">
          <!-- 物流公司信息 -->
          <span>{{ express.name }}</span>
          <span>{{ express.awbNo }}</span>
        </p>
      </div>
    </div>
    <div class="logistics">
      <p class="title">物流详情</p>
      <!-- 
        使用van-steps时间轴组件显示物流详细信息
        1. vertical控制时间轴显示方向
        2. active控制时间轴选中
       -->
      <van-steps direction="vertical" :active="0">
        <van-step v-for="item in express.list" :key="item.id">
          <p class="status">{{ item.statusValue }}</p>
          <p class="content">{{ item.content }}</p>
          <p class="time">{{ item.createTime }}</p>
        </van-step>
      </van-steps>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.order-logistics-page {
  --van-step-icon-size: 18px;
  --van-step-circle-size: 10px;
}
#map {
  height: 450px;
  background-color: const(--cp-bg);
  overflow: hidden;
  position: relative;
  .title {
    background-color: #fff;
    height: 46px;
    width: 355px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-size: 16px;
    position: absolute;
    left: 10px;
    top: 10px;
    box-sizing: border-box;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    z-index: 999;
    > span {
      flex: 1;
      text-align: center;
    }
    .van-icon {
      font-size: 18px;
      color: #666;
      &:last-child {
        color: const(--cp-primary);
      }
    }
  }
  .current {
    height: 80px;
    border-radius: 4px;
    background-color: #fff;
    height: 80px;
    width: 355px;
    box-sizing: border-box;
    padding: 15px;
    position: absolute;
    left: 10px;
    bottom: 10px;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    z-index: 999;
    .status {
      font-size: 15px;
      line-height: 26px;
    }
    .predict {
      color: const(--cp-tip);
      font-size: 13px;
      margin-top: 5px;
      > span {
        padding-right: 10px;
      }
    }
  }
}
.logistics {
  padding: 0 10px 20px;
  .title {
    font-size: 16px;
    padding: 15px 5px 5px;
  }
  .van-steps {
    :deep(.van-step) {
      &::after {
        display: none;
      }
    }
    .status {
      font-size: 15px;
      color: const(--cp-text3);
      margin-bottom: 4px;
    }
    .content {
      font-size: 13px;
      color: const(--cp-tip);
      margin-bottom: 4px;
    }
    .time {
      font-size: 13px;
      color: const(--cp-tag);
    }
  }
}
</style>
